<template>
    <div class="me" v-if="this.$store.state.user.isLogin">
        <header class="me-top" v-show="!isShow">
        <svg class="icon" aria-hidden="true" @click="$router.push('/')">
                <use xlink:href="#icon-zuo1"></use>
        </svg>
        <div class="title">
            {{$store.state.user.userDetail.profile.nickname}}的主页
        </div>
        <svg class="icon" aria-hidden="true" @click="value">
                <use xlink:href="#icon-touxiang"></use>
        </svg>
        </header>
        <section class="me-Personal">
            <div class="me-Personal-img">
                <img  :src="$store.state.user.userDetail.profile.avatarUrl">
            </div>
            <div class="me-Personal-text">
                <h1>{{$store.state.user.userDetail.profile.nickname}} <span>lv:{{$store.state.user.userDetail.level}}</span></h1>
                <div v-if="$store.state.user.userDetail.profile.vipType==0">
                    您还未开通VIP
                    <button>开通会员</button>
                </div>
                <div v-else>尊敬的VIP会员<button>续费会员</button></div>
            </div>
        </section>
        <div class="value" v-show="is">
            <div @click="logout">退出登录</div>
        </div>
    </div>
    <meList />
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import meList from '../components/Me/meList.vue'
import { userLogout } from '../api/index'
export default {
  components: {
    meList
  },
  computed: {
    ...mapState(['isShow'])
  },
  data () {
    return {
      is: false
    }
  },
  methods: {
    ...mapMutations(['setIsShow']),
    value () {
      this.is = !this.is
    },
    async logout () {
      const res = await userLogout()
      console.log(res)
      if (res.data.code === 200) {
        this.$store.state.user = [
          {
            isLogin: false,
            account: '',
            userDetail: ''
          }
        ]
        this.$store.commit('setUser', this.$store.state.user)
        this.$store.commit('setIsUser', '退出')
        this.$router.push({ path: '/' })
      }
    }
  },
  mounted () {
  }
}
</script>
<style lang="less" scoped>
.me{
    width: 7.5rem;
    .me-top{
    height: 1rem;
    width: 7.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position:fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: white;
    border-bottom: 1px solid #ccc;
    .title{
        font-style: italic;
        font-weight: 900;
    }
    .icon{
        width: 0.6rem;
        height: 0.6rem;
        fill:#000;
    }
}
.me-Personal{
    width: 7.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem;
    margin-top: 1rem;
    img{
        width: 2rem;
        height: 2rem;
        border: 1px solid #ccc;
    }
    .me-Personal-text{
        line-height: 0.8rem;
        h1{
            font-weight: 900;
            color: #000;
            span{
                font-style: italic;
                color: red;
                border: 1px solid red;
                border-radius: 25%;
                padding: 0 0.1rem;
                font-size: 0.3rem;
            }
        }
        div{
            color:gray;
            button{
                color: red;
                margin-left: 0.2rem;
            }
        }
    }
}
    .value{
        width: 2rem;
        height: 0.5rem;
        background-color: #000;
        color:white;
        text-align: center;
        position:fixed;
        top: 1rem;
        right: 0;
        padding:  0.05rem 0;
    }
}

</style>
